<template>
    <view>
        <!-- #ifdef APP  -->
        <u-navbar ref="navbar" :is-back="true" :back-text-style="{color: '#007aff'}" back-icon-color="#007aff"
            title-color="#007aff" title="通讯录"></u-navbar>
        <!-- #endif -->
        <!-- #ifdef H5  -->
        <u-navbar ref="navbar" :is-back="true" :back-text-style="{color: '#007aff'}" back-icon-color="#007aff"
            title-color="#007aff" title="通讯录"></u-navbar>
        <!-- #endif -->
        <u-index-list :scrollTop="scrollTop" :index-list="FristPin">
            <scroll-view scroll-y="true">
                <view v-for="(item, index) in cityjson" :key="index">
                    <u-index-anchor :index="item.letter" />
                    <view class="list-cell u-border-bottom" v-for="(childitem, $index) in item.data" :key="$index"
                        @click="f_chartindex(childitem)">
                        <image :lazy-load="true" style="border-radius: 10%;width: 80rpx;height: 80rpx;"
                            :src="childitem.userUrl" mode="aspectFill"></image>
                        <text style="padding-left: 10rpx;"> {{childitem.name}}</text>
                    </view>
                </view>
            </scroll-view>
        </u-index-list>
    </view>
</template>
<script>
    import {
        mapMutations,
        mapState,
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                CustomBar: this.CustomBar,
                FristPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y",
                    "Z", "#"
                ],
                scrollTop: 0,
                cityjson: [],
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        onShow() {


            // t.$refs.home.loadDtlist();
        },
        mounted() {
            var t = this
            t.loadalluser();
        },
        methods: {
            ...mapMutations(['setchartuserinfo']),
            f_chartindex(i) {
                let t = this
                console.log(i);
                let obj = {
                    fromUserId: t.$cfg.user().id,
                    fromUserName: t.$cfg.user().name,
                    fromUserNum: t.$cfg.user().userNum,
                    fromUserUrl: t.$cfg.user().userUrl,
                    showUserUrl: i.userUrl,
                    showUserId: i.id,
                    showUserName: i.name,
                    showUserNum: i.userNum,
                    toUserId: i.id,
                    toUserName: i.name,
                    toUserNum: i.userNum,
                    toUserUrl: i.userUrl,

                }
                t.setchartuserinfo(obj)
                t.f.nav(`/perPackages/pages/PerHomepage/PerHomepage?id=${i.id}`)
            },
            loadalluser() {

                var t = this
                var obj = {
                    pageNo: 1,
                    pageSize: 300,
                }
                let pinyin = require('js-pinyin');
                pinyin.setOptions({
                    checkPolyphone: false,
                    charCase: 0
                });
                let cityArr = [];
                t.$api.req('/staffnt/stClientUser/list', obj).then(res => {
                    if (res.success) {
                        for (let i = 0; i < res.result.records.length; i++) {
                            const e = res.result.records[i];
                            let cityName = e.name;
                            let fristName = pinyin.getCamelChars(cityName).substring(0, 1); //这里截取首字母的第一位
                            //给原json添加首字母键值对
                            e.first = fristName;
                            //放入新数组
                            cityArr.push(e);
                            // var childcity=[]
                            // for (let j = 0; j < cityArr.length; j++) {
                            //     const k = cityArr[j];
                            // }
                        }
                        let cityJson = [];
                        //根据首字母键值对给原数据按首字母分类
                        for (let i = 0; i < t.FristPin.length; i++) { //这里的FirstPin是一个写入了所有字母的数组,见data中
                            var obj = {
                                data: [],
                                letter: t.FristPin[i]
                            }
                            for (let j = 0; j < cityArr.length; j++) {
                                const k = cityArr[j];
                                if (k.first == t.FristPin[i]) {
                                    obj.data.push(k)
                                    // obj.letter = t.FristPin[i]
                                }
                            }
                            t.cityjson.push(obj)
                        }
                    }
                })
            },
        }
    }
</script>